<template>
  <div class="form beauty-scroll" ref="forms">
    <a-card class="card">
      <a-anchor class="anchor" :affix="false"  :offsetTop="12" @change="onChange">
        <a-menu class="menu" mode="horizontal" :selectedKeys="[curr]">
          <a-menu-item v-for="(item,index) in menuList" :key="index" >
            <a-anchor-link  :href="'#'+item.key">
              <span slot="title">{{item.name}}</span>
            </a-anchor-link>
          </a-menu-item>
        </a-menu>
      </a-anchor>
    </a-card>
    <a-form class="form-content" :form="form" labelAlign="right" style="width:100%;height:1000px;">
      <a-card id="card0">
        <div class="card-title" slot="title">基本信息</div>

        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="项目编号" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="项目名称" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="项目简称" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="工程类别" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-select>
                <a-select-option value="类别1">类别1</a-select-option>
                <a-select-option value="类别2">类别2</a-select-option>
                <a-select-option value="类别3">类别3</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="项目状态" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-radio-group :default-value="1">
                <a-radio :value="1">状态1</a-radio>
                <a-radio :value="2">状态2</a-radio>
                <a-radio :value="3">状态3</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="项目经理" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="业主" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="规划许可证号" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card id="card1">
        <div class="card-title" slot="title">工期信息</div>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="合同开工日期" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-date-picker format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="合同竣工日期" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-date-picker format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="合同工期(天)" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="实际开工日期" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-date-picker format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="实际竣工日期" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-date-picker format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="实际工期(天)" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="工作地点" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-radio-group :default-value="1">
                <a-radio :value="1">地点1</a-radio>
                <a-radio :value="2">地点2</a-radio>
                <a-radio :value="3">地点3</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="重点工程" :labelCol="{span:8}"
        :wrapperCol="{span:16}">
              <a-input></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card>
        <div slot="title">
          <a-button type="primary" size="small">新增</a-button>
          <a-button type="danger" size="small" style="margin-left:10px;">删除</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <a slot="name" slot-scope="text">{{ text }}</a>
        </a-table>
      </a-card>
      <a-card id="card2">
        <div class="card-title" slot="title">附件列表</div>
        <div style="text-align:end;margin-top:-36px;margin-bottom:14px;">
          <a-button type="primary" size="small">打开范本</a-button>
          <a-button type="danger" size="small" style="margin-left:10px;">添加附件</a-button>
        </div>
        <div class="annex">
          <a-card class="annex-item" hoverable>
            <img slot="cover" src="@/assets/img/wallpaper_01.jpeg" />
            <div class="content">
              <span>附件1</span>
            </div>
          </a-card>
          <a-card class="annex-item" hoverable>
            <img slot="cover" src="@/assets/img/wallpaper_02.jpeg" />
            <div class="content">
              <span>附件2</span>
            </div>
          </a-card>
          <a-card class="annex-item" hoverable>
            <img slot="cover" src="@/assets/img/wallpaper_03.jpeg" />
            <div class="content">
              <span>附件3</span>
            </div>
          </a-card>
        </div>
      </a-card>
    </a-form>
  </div>
</template>
<script>
import { windowCtrl } from '@/mixins/windowCtrl'
export default {
  mixins:[windowCtrl],
  data (){
    return {
      curr: 0,
      menuList: [
        {id:0,key:'card0',name:'基本信息'},
        {id:1,key:'card1',name:'工期信息'},
        {id:2,key:'card2',name:'附件列表'},
      ],
      form: this.$form.createForm(this),
      columns: [
        { title: '序号', dataIndex: 'index', key: '1'},
        { title: '单位工程名称', dataIndex: 'name', key: '2'},
        { title: '计划开工日期', dataIndex: 'date0', key: '3'},
        { title: '计划竣工日期', dataIndex: 'date1', key: '4'},
        { title: '计划工期(天)', dataIndex: 'time0', key: '5'},
        { title: '实际开工日期', dataIndex: 'date2', key: '6'},
        { title: '实际竣工日期', dataIndex: 'date3', key: '7'},
        { title: '实际工期(天)', dataIndex: 'time1', key: '8'},
        { title: '建筑面积(m²)', dataIndex: 'area', key: '9'},
        { title: '公里数', dataIndex: 'kilometre', key: '10'},
      ],
      data: [
        {
          key: '1',
          index: '1',
          name: '测试数据',
          date0:'2021-09-06',
          date1:'2021-09-06',
          date2:'2021-09-06',
          date3: '2021-09-06',
          time0: '2021-09-06',
          time1:'2',
          area: '2',
          kilometre: '123'
        },
      ]
    }
  },
  mounted () {
    this.$refs.forms.onscroll = ()=>{
      if(this.$refs.forms.scrollTop<=10&&this.curr) this.curr = 0
    }
  },
  methods: {
    onChange(e){
      let target = this.menuList.filter(item=>item.key==e.slice(1))[0]
      this.curr = target.id||0
    },
  }
}
</script>
<style lang="less" scoped>
  .form{
    padding: 12px;
    height: 100%;
    background-color: @layout-bg-color;
    overflow-x: hidden;
    overflow-y: scroll;
    .card{
      border-radius: 8px;
      /deep/.ant-card-body{
        padding:0 24px;
      }
      .anchor{
        margin-left: 0;
        padding-left: 0;
        /deep/.ant-anchor-ink::before{
          display: none;
        }
        /deep/.ant-anchor-link{
          padding: 0;
        }
        /deep/.ant-anchor-link-active>.ant-anchor-link-title{
          color: inherit;
        }
        /deep/.ant-menu-item-selected{
          a{
            color: @primary-color;
          }
        }
        /deep/.ant-anchor-link-title{
          padding: 7px;
          padding-bottom: 14px;
        }
      }
      .menu{
        border-bottom-color: transparent;
        box-shadow: unset;
        line-height: 50px;
        /deep/.ant-menu-item, /deep/.ant-menu-submenu-title{
          padding: 0 6px;
        }
      }
    }
    .form-content{
      .ant-card{
        margin-top: 12px;
        border-radius: 8px;
        /deep/.ant-card-head{
          border-bottom: unset;
        }
        /deep/.ant-card-body{
          padding: 0 24px 24px;
        }
        .card-title{
          border-left: 3px solid @primary-color;
          padding-left: 4px;
          color: @primary-color;
          font-size: 18px;
          line-height: 20px;
          font-weight: bold;
        }
        /deep/.ant-form-item-control{
          white-space: nowrap;
        }
        /deep/.ant-calendar-picker{
          width: 100%;
        }
      }
      .annex{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        .annex-item{
          width: 100px;
          margin-right: 24px;
          border-radius: 6px;
          /deep/.ant-card-body{
            padding: 2px;
            text-align: center;
          }
        }
      }
    }
    
  }
</style>